<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
        />
        <title>feColorMatrix</title>
        <!-- <link rel="stylesheet" type="text/css" href="css/common.css" /> -->
        <style>
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
        </style>
    </head>

    <body>
        <div class="page">
            <svg
                width="500px"
                height="500px"
                viewBox="0 0 500 500"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
            >
                <!-- ref -->
                <defs>
                    <g id="circles">
                        <circle
                            cx="30"
                            cy="30"
                            r="20"
                            fill="blue"
                            fill-opacity="0.5"
                        />
                        <circle
                            cx="20"
                            cy="50"
                            r="20"
                            fill="green"
                            fill-opacity="0.5"
                        />
                        <circle
                            cx="40"
                            cy="50"
                            r="20"
                            fill="red"
                            fill-opacity="0.5"
                        />
                    </g>
                </defs>
                <use href="#circles" />
                <text x="70" y="50">Reference</text>

                <!-- identity matrix -->
                <filter id="colorMeTheSame">
                    <feColorMatrix
                        in="SourceGraphic"
                        type="matrix"
                        values="1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 1 0"
                    />
                </filter>
                <use
                    href="#circles"
                    transform="translate(0 70)"
                    filter="url(#colorMeTheSame)"
                />
                <text x="70" y="120">Identity matrix</text>

                <!-- Combine RGB into green matrix -->
                <filter id="colorMeGreen">
                    <feColorMatrix
                        in="SourceGraphic"
                        type="matrix"
                        values="0 0 0 0 0
                        1 1 1 1 0
                        0 0 0 0 0
                        0 0 0 1 0"
                    />
                </filter>
                <use
                    href="#circles"
                    transform="translate(0 140)"
                    filter="url(#colorMeGreen)"
                />
                <text x="70" y="190">rgbToGreen</text>

                <!-- saturate -->
                <filter id="colorMeSaturate">
                    <feColorMatrix
                        in="SourceGraphic"
                        type="saturate"
                        values="0.2"
                    />
                </filter>
                <use
                    href="#circles"
                    transform="translate(0 210)"
                    filter="url(#colorMeSaturate)"
                />
                <text x="70" y="260">saturate</text>

                <!-- hueRotate -->
                <filter id="colorMeHueRotate">
                    <feColorMatrix
                        in="SourceGraphic"
                        type="hueRotate"
                        values="180"
                    />
                </filter>
                <use
                    href="#circles"
                    transform="translate(0 280)"
                    filter="url(#colorMeHueRotate)"
                />
                <text x="70" y="330">hueRotate</text>

                <!-- luminanceToAlpha -->
                <filter id="colorMeLTA">
                    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
                </filter>
                <use
                    href="#circles"
                    transform="translate(0 350)"
                    filter="url(#colorMeLTA)"
                />
                <text x="70" y="400">luminanceToAlpha</text>
            </svg>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    </body>
</html>
